<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="index.css" />
		<script type="text/javascript" src="../dist/js/lib/jquery-2.2.1.js" ></script>
		<style>
			#allmap{width:100%;height:100%;}
	    </style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TV0mZBFKvPRpRalGy3rGVRBfuKs8HA4G"></script>
		<title>天气信息</title>
	</head>
	<body onload="initMap()">
		<div id="allmap"></div>
		<div class="map_con">
		<div id="console_timer">
			<div class="time area">
				<div class="playbtn paly" id="playbtn" onclick="play(this.id)">
				</div>
				<div class="openclosebtn" onclick="openAll()">
				</div>
				<div class="con" >
					<ul id="cutLine" class="cutLine" >
					</ul>
				</div>
				<div class="con_font" style="display: none;">14:00</div>
				<div class="bg"></div>
			</div>
		</div>
		</div>
		
	</body>

</html>
<script>
		// 百度地图API功能
    	var map ;       
	 
	    function initMap(){
	    	  map = new BMap.Map("allmap");  
	    	   map.centerAndZoom(new BMap.Point(116.4035,39.915),4);
	    	   map.enableDragging();   //两秒后开启拖拽
			  // 添加带有定位的导航控件
			  var navigationControl = new BMap.NavigationControl({
			    // 靠左上角位置
			    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
			    // LARGE类型
			    type: BMAP_NAVIGATION_CONTROL_SMALL,
			    // 启用显示定位
			    enableGeolocation: true
			  });
			  map.addControl(navigationControl);
			  // 添加定位控件
			  var geolocationControl = new BMap.GeolocationControl();
			  geolocationControl.addEventListener("locationSuccess", function(e){
			    // 定位成功事件
			    var address = '';
			    address += e.addressComponent.province;
			    address += e.addressComponent.city;
			    address += e.addressComponent.district;
			    address += e.addressComponent.street;
			    address += e.addressComponent.streetNumber;
			    //alert("当前定位地址为：" + address);
			    map.panTo(new BMap.Point(e.point.lng,e.point.lat));
			  });
			  geolocationControl.addEventListener("locationError",function(e){
			    // 定位失败事件
			    alert(e.message);
			  });
			  map.addControl(geolocationControl);
			  
			  
			  	function myFun(result){
					var cityName = result.name;
					map.setCenter(cityName);
					//result.center.lat
					//获取两小时预报
					get2hforcast(result.center.lat,result.center.lng);
					map.setZoom(9)
					//alert("当前定位城市:"+cityName);
					var bdary = new BMap.Boundary();
						bdary.get(cityName, function(rs){       //获取行政区域
							map.clearOverlays();        //清除地图覆盖物       
							var count = rs.boundaries.length; //行政区域的点有多少个
							if (count === 0) {
								alert('未能获取当前输入行政区域');
								return ;
							}
				          	var pointArray = [];
							for (var i = 0; i < count; i++) {
								var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillOpacity:0,fillColor:"rgba(255,255,255,0)"}); //建立多边形覆盖物
								map.addOverlay(ply);  //添加覆盖物
								pointArray = pointArray.concat(ply.getPath());
							}    
							map.setViewport(pointArray);    //调整视野  
						});   
				}
				var myCity = new BMap.LocalCity();
				myCity.get(myFun);
	    }
	  
	  
	function get2hforcast(lat,lng){
	               
	               $.ajax({
    			        url: '../2hrf?lat='+lat+"&lng="+lng ,  
    			        type: 'get',
    			        async:false,    //是否异步
    			        success: function (returndata) {
    			        	alert(returndata)
//  			            var list=JSON.parse(returndata);
//  			        	 if(list[0].code=='10010'){
//  			        		  locastorage.setItem('user',JSON.stringify(list[1]));
//  			        		  notice.remove();
//  			        		  
//  			        		  login.innerText ="我的";
//  			        		  login.addEventListener('touchstart',function(){
//  			      				 window.location.href='myinfo.html';
//  			      			   },false);
//  			        		 
//  			        		  window.location.href=url;
//  		                   }else{
//  		                	   msg('请输入正确的账号信息','error');
//  		                    }
//  	                
//  	                
    			        },  
    			        error: function (returndata) { 
    			        	alert("dasd"+returndata)
    			         //   msg(returndata,'error');
    			        }  
    			    });
	}
	    
	var cutLine=$("#cutLine");
	var items=$("<p></p>")
	var html="";
//	 class='on last'
	for(var i=0;i<24;i++){
		html=$("<li data-t='"+i+":00' data-n='"+i+"'  class=' '  onclick='clickOne("+i+")' >"+
		"<div class='poi'></div>"+
		"<div class='note'>"+i+":00</div>"+
		"<span>"+i+"</span>"+
		"<i></i></li>");
		cutLine.append(html);
		addSelect(0);
	}
			
    var list=new Array();
    var isplay=false;
    var palybtn;
	function play(id){
	     palybtn=$("#"+id);
		if(palybtn.hasClass("paly")){
			isplay=true;
			palybtn.removeClass("paly");
		    palybtn.addClass("stop");
		}
		else if(palybtn.hasClass("stop")){
			palybtn.removeClass("stop");
		    palybtn.addClass("paly");
		    isplay=false;
		}
		animation();
	}
	function openAll(){
			for (var i=0;i<24;i++) {
				if(i<12){
					cutLine.children().eq(i).removeClass("none")
					cutLine.children().eq(i).addClass("diplays")
				}else{
					cutLine.children().eq(i).removeClass("on")
				}
				
			}
	}
	    var j=0;
		function animation(){
		   var interval = setInterval(function(){
		    	if(!isplay) {
		    		clearInterval(interval)
		    		return;
		    	}
		    	 //console.log(j)
		    	  cutLine.children().eq(j).addClass("on last");
			      cutLine.children().eq(j-1).removeClass("last")
			      
			      j++;
			      if(j==25) {
			      	 clearStyle(0);
			      	 isplay=false;
			      	 palybtn.removeClass("stop");
		   			 palybtn.addClass("paly");
		   			 j=0;
			      }
			      if(j>12){
			      	 cutLine.children().eq(((j-13))).addClass("none")
			      }
		    },100);
		}
		
		function clearStyle(selectindex){
			for (var i=0;i<24;i++) {
				cutLine.children().eq(i).removeClass("last on")
			}
			addSelect(selectindex);
		}
		function addSelect(selectindex){
			if(selectindex==-1) return;
			cutLine.children().eq(selectindex).addClass("last on")
		}
	    
	    function clickOne(selectindex){
	    	clearStyle(selectindex);
	    	isplay=false;
			palybtn.removeClass("stop");
		   	palybtn.addClass("paly");
	    }


	
</script>